<template>
  <div style="width: 100%;">
    <div id="weiYiChart" style="width:100%;height:5.5rem;"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: null
    };
  },
  mixins: [echartMixins],
  mounted() {
	  setTimeout(()=>{
		  // this.changData();
		  this.draw()
	  },200)
  },
  methods: {
  	  async changData(){
  		var _this=this;
  		let result = await _this.$http.get("api/bi/getBiGZTJ.do ");
  		if(result  &&  result.status===200){
  			console.log(result.data)
  		}
  	  },
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("weiYiChart"));
      //  ----------------------------------------------------------------
      var day =10;
      var myDate = new Date(); //获取今天日期
      myDate.setDate(myDate.getDate() - (day - 1));//setDate() 方法用于设置一个月的某一天。
      var dateArray = [];
      var dateTemp;
      var flag = 1;
      for (var i = 1; i < day; i++) {
        dateTemp = (myDate.getMonth()+1)+"月"+myDate.getDate() + '日';
        dateArray.push(dateTemp);
        myDate.setDate(myDate.getDate() + flag);
      }
      dateArray.push((myDate.getMonth()+1)+"月"+ myDate.getDate()+ '日');

      let category = dateArray;
      let rateData = [
        92,
        28,
        45,
        48,
        18,
        97,
        67,
        73,
        86,
        15,
      ];
      let option = {
        title: {
          text: "",
          x: "center",
          y: 0,
          textStyle: {
            color: "#B4B4B4",
            fontSize: 16,
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.1)",
          textStyle: { // 提示框浮层的文本样式。
              color: '#fff',
          },
          axisPointer: {
            type: "shadow",
            label: {
              show: false,
              backgroundColor: "#7B7DDC"
            }
          }
        },
        // legend: {
        //   data: ["泄漏"],
        //   textStyle: {
        //     color: "#B4B4B4"
        //   },
        //   top: "0%"
        // },
        grid: {
          x: "10%",
          width: "90%",
          y: "4%"
        },
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitLine: {
                show: true,
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: ['#1c1a33'],
                            width: 2,
                            type: 'solid'
                        }
        },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },

            axisLabel: {
              formatter: "{value}m³"
            }
            ,
            max:5000
          }
        ],
        series: [
          {
            name: "泄漏",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: "#1c4986"
              }
            },
            data: rateData
          },
        ]
      };
      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
</style>